<template>
	<view>
		<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.7)" @maskClick="closePopup">
			<view class="coin-result">
				<view class="center hint">
					<text>恭喜找到宝藏！</text>
				</view>
				<view class="center hint2">
					硬币名称：{{props.coinName}}
				</view>
				<view class="center hint3">
					硬币编号：{{props.coinId}}
				</view>
				<view class="coin-content">
					<view class="star-left">
						<image class="star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star1.png" mode="widthFix"></image>
						<image class="star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star2.png" mode="widthFix"></image>
					</view>
					<view class="coin">
						<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/' + coinTypeImg" mode="widthFix"></image>
					</view>
					<view class="star-right">
						<image class="star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3.png" mode="widthFix"></image>
						<image class="star3-box" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3-box.png" mode="widthFix"></image>
						<image class="star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star4.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="center">
					<view class="btn center" @click="openUploadPopup">
						上传视频
					</view>
				</view>
			</view>
		</uni-popup>

		<touch-popup ref="bindCoin" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
			<scroll-view scroll-y style="height: 100%;margin-top: 15px;">
				<view class="top">
					<view class="star-left">
						<image class="bindcoin-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star1.png"
							mode="widthFix"></image>
						<image class="bindcoin-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star2.png"
							mode="widthFix"></image>
					</view>
					<view class="">
						<view class="bck-circle center">
							<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinTypeImg" mode="widthFix"></image>
						</view>
					</view>
					<view class="star-right">
						<image class="bindcoin-star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star3.png"
							mode="widthFix"></image>
						<image class="bindcoin-star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star4.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="center-title">
					<view class="center">
						硬币名称：{{props.coinName}}
					</view>
					<view class="center">
						硬币编号：{{props.coinId}}
					</view>
				</view>
				<view class="center-video center">
					<view class="video">
						<video :src="video"></video>
					</view>
				</view>
				<view v-if="!checkedVideo" class="center-hint center">
					请参照以上视频示例拍摄视频并上传
				</view>
				<view v-else class="center-address center">
					<view class="center-address-bck">
						<view class="center">
							产出地址
						</view>
						<view class="center">
							{{props.coinAddress}}
						</view>
					</view>
				</view>
				<view class="center" style="padding: 5px 20px;">
					<view v-if="!checkedVideo" class="btn center" @click="uploadCheck">
						上传视频
					</view>
					<view v-else class="btn2 center" @click="uploadOss">
						{{isUploaded ? '完成' : '确认上传'}}
					</view>
				</view>
				<view class="logo" v-if="!checkedVideo">
					<image class="img-logo" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/logo.png" mode="heightFix"></image>
					<view class="center bck-hint">
						<view class="">
							上传视频至抖音
						</view>
						<view class="">
							并@官方号可额外获得橡果
						</view>
					</view>
				</view>
			</scroll-view>
		</touch-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import {
		ref,
		computed,
		defineExpose,
		getCurrentInstance,
		defineProps
	} from 'vue'
	const props = defineProps({
		coinId: Number,
		coinType: Number,
		coinName: String,
		coinAddress: String,
	})
	const {proxy} = getCurrentInstance()
	const popup = ref() // ref组件
	const bindCoin = ref();
	const isUploaded = ref(false);

	const video = ref('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips.mp4')
	let tmpVideoPath = '' // 选定的视频文件路径
	let videoFile = '' // 选定的视频文件
	let coin_id = ''
	const checkedVideo = ref(false)

	const coinTypeImg = computed(() => {
		if (props.coinType === 2) {
			return 'silver.png'
		} else if (props.coinType === 3) {
			return 'copper.png'
		} else {
			return 'gold.png'
		}
	})

	// 上传至oss
	const uploadOss = () => {
		if (isUploaded.value) {
			popup.value.close();
			bindCoin.value.close();
			return;
		}
		uni.showLoading({
			title: '正在上传视频'
		})
		uni.uploadFile({
			url: app.globalData.requestUrl + '/api/file/upload',
			filePath: tmpVideoPath,
			file: videoFile,
			name: 'file',
			success(res) {
				let data = JSON.parse(res.data)
				if (data.code === 200) {
					// let url = data.data[0]
					// 保存硬币
					uni.request({
						url: app.globalData.requestUrl + '/api/user/coin/save',
						data: {
							coin_id: props.coinId,
							content: data.data[0]
						},
						method: 'POST',
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						success: (res) => {
							if (res.data.code === 200) {
								uni.hideLoading()
								// popup.value.close()
								// bindCoin.value.close()
								uni.showToast({
									title: '已成功获取硬币!可前往硬币列表查看',
									icon: 'none',
									duration: 3000
								});
								isUploaded.value = true;
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}
			},
			fail(err) {
				console.log('err', err)
			}
		})

	}
	// 选择视频
	const uploadCheck = () => {
		console.log('上传')
		uni.chooseVideo({
			sourceType: ['camera', 'album'],
			success: function(res) {
				video.value = res.tempFilePath
				checkedVideo.value = true
				tmpVideoPath = res.tempFilePath
				videoFile = res.tempFile
			}
		})
	}
	// 打开上传视频的弹窗
	const openUploadPopup = () => {
		console.log('打开上传视频的弹窗')
		 // 初始化
		video.value = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips.mp4';
		isUploaded.value = false;
		checkedVideo.value = false;
		bindCoin.value.open();
	}
	const open = () => {
		popup.value.open()
	}
	const closePopup = () => {
		proxy.$emit('close');
	}
	const close = () => {
		popup.value.close();
		proxy.$emit('close');
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.img-logo {
		position: relative;
		left: 0;
		bottom: 0;
		height: 200px;
	}

	.bck-hint {
		position: absolute;
		left: 85px;
		top: 50%;
		font-size: 10px;
		color: #888888;
		background-color: rgba(255, 229, 200, 0.9);
		border-radius: 16px;
		padding: 10px 20px;
		display: flex;
		flex-direction: column;
	}

	.logo {
		position: relative;
		display: flex;

	}

	.center-address-bck view:first-child {
		font-weight: 500;
	}

	.center-address-bck view:last-child {
		font-size: 15px;
	}

	.center-address-bck {
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #fff;
		border-radius: 15px;
		padding: 10px;

	}

	.center-address {
		padding: 20px 15px;

	}

	.center-hint {
		font-size: 13px;
		font-weight: 300;
		padding: 5px;
	}
	video {
			width: 100%;
			height: 100%;
			border-radius: 15px;
		}
	.video {
		background-color: #fff;
		border-radius: 15px;
		width: 300px;
		height: 180px;
		padding: 12px;
	}

	.center-title view:first-child {
		font-size: 20px;
		font-weight: bold;
	}

	.center-title view:last-child {
		font-size: 14px;
	}

	.center-title {
		padding: 15px;

	}

	.bck-circle image {
			width: 55px;
		}
	.bck-circle {
		width: 85px;
		height: 85px;
		border-radius: 50px;
		background-color: #fff;
	}

	.top {
		display: flex;
		position: relative;
		padding-top: 30px;

	}

	.btn {
		background: linear-gradient(180deg, #C1FF8F 0%, #0DFFB9 100%);
		width: 143px;
		height: 45px;
		font-size: 14px;
		font-weight: bold;
		border-radius: 20px;
		margin-top: 20px;
	}

	.btn2 {
		height: 45px;
		font-size: 14px;
		border-radius: 24px;
		color: #fff;
		width: 100%;
		background-color: #000;
	}

	.star1 {
		right: -15px;
		top: 10px;
		width: 21px;
	}

	.star2 {
		right: 0;
		top: 50%;
		width: 10px;
	}
	
	.star3,.star3-box {
		left: -20px;
		top: 0px;
		width: 35px;
	}

	.star4 {
		left: 0;
		top: 30%;
		width: 12px;
	}

	.bindcoin-star1 {
		width: 36px;
		right: 15px;
		top: -5px;
	}

	.bindcoin-star2 {
		width: 16px;
		right: 30px;
		top: 50px;
	}

	.bindcoin-star3 {
		width: 22px;
		left: 15px;
		top: 0;
	}

	.bindcoin-star4 {
		width: 12px;
		left: 45px;
		bottom: 5px;
	}

	.star-left image {
		position: absolute;
	}

	.star-right image {
		position: absolute;
	}

	.star-left,
	.star-right {
		flex: 1;
		position: relative;
	}

	image {
		height: auto;
	}
	.coin {
		padding: 10px;
	}
	.coin image {
		width: 146px;
	}

	.coin-content {
		display: flex;
	}

	.hint3 {
		font-size: 11px;
		color: #fff;
	}

	.hint2 {
		font-size: 13px;
		color: #fff;
		padding: 2px;
	}

	text {
		background: linear-gradient(180deg, #BCFD90 0%, #16FFB7 100%);
		color: transparent;
		-webkit-background-clip: text;
	}

	.hint {
		padding: 5px;
		font-family: Noto Sans S Chinese;
		font-size: 20px;
		font-weight: 400;
		line-height: 30px;
		text-align: center;
	}

	.coin-result {
		height: auto;
		width: 750rpx;
	}

	scroll-view {
		z-index: 999;
		position: relative;
	}
</style>